<template>

</template>

<script>
	export default {
		props: {
			startTime: {
				type: Date,
			},
			endTime: {
				type: Date,
			},
		},
		data() {
			return {
				timer: null,
				times: {
					d: 0,
					h: 0,
					m: 0,
					s: 0,
				},
				//秒杀开始标致
				isStart: false
			}
		},
		mounted() {
			console.log("进来");
			this.time()
		},
		beforeDestroy() {
			clearInterval(this.timer);
			this.timer = null;
		},
		computed: {
			sTime() {
				console.log('传进来', );
				// let Times = this.timestampToTime(this.startTime);
				let str = this.startTime.replace(/-/g, '/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
				console.log('开始时间', str);
				var date = new Date(str); // 构造一个日期型数据，值为传入的字符串
				var time = date.getTime();
				return time
			},
			eTime() {
				// let Times = this.timestampToTime();
				let str = this.endTime.replace(/-/g, '/');
				console.log('结束时间', str); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
				var date = new Date(str); // 构造一个日期型数据，值为传入的字符串
				var time = date.getTime();
				return time
			}
		},
		watch: {
			endTime() {
				clearInterval(this.timer);
				this.time()
			},
			s() {
				if (this.sTime <= new Date().getTime()) {
					this.isStart = true;
				}
			},
			isStart() {
				clearInterval(this.timer);
				this.time()
			}
		},
		methods: {
			timestampToTime(time) {
				var chinaStandard = time;
				var date = new Date(chinaStandard);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				var minute = date.getMinutes();
				minute = minute < 10 ? ('0' + minute) : minute;
				var second = date.getSeconds();
				second = second < 10 ? ('0' + second) : second;
				let Time = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
				return Time
			},
			time() {
				console.log('进来6', this.sTime, new Date().getTime());
				if (!this.isStart && this.sTime <= new Date().getTime()) {
					this.isStart = true;
				}
				let leftTime = this.getDateDiff(this.sTime, this.eTime);
				console.log('进来2', leftTime);
				this.getCountdownTime(leftTime);
			},
			//计算两个时间差
			getDateDiff(startTime, endTime) {
				//判断时间是否开始
				if (this.isStart) {
					endTime = new Date(endTime);
					console.log('进来5', endTime);
					return parseInt((endTime.getTime() - new Date().getTime()) / 1000);
				} else {
					startTime = new Date(startTime);
					return parseInt((startTime.getTime() - new Date().getTime()) / 1000);
				}
			},
			//计算活动结束时间
			getCountdownTime(leftTime) {
				console.log('进来3', leftTime);
				let time = leftTime
				if (time > 0) {
					clearInterval(this.timer);
					this.timer = setInterval(() => {

						if (time == 0) {
							clearInterval(this.timer)
							this.times.h = 0
							this.times.m = 0
							this.times.s = 0

							if (this.isStart) {
								this.$emit('countdownEnd');
							} else {
								this.$emit('countdownStarts');
							}
						} else {
							this.times.d = parseInt(leftTime / 3600 / 24);
							this.times.h = parseInt((time / 3600) % 24);
							this.times.m = parseInt((time / 60) % 60);
							this.times.s = parseInt(time % 60);

							time--
							this.$emit('getTime', this.times)
						}
					}, 1000)
				}
			},
			clear() {

				clearInterval(this.timer);
				this.timer = null;
				console.log('清除', this.timer);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.countdown {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: #fff;

		.day {
			font-size: 20rpx;
			color: #606060;
			display: flex;
			align-items: center;

			.text {
				color: #FD3C22;
				font-weight: bold;
			}
		}

		.time {
			padding: 3rpx;
			background-color: #606060;
			border-radius: 4rpx;
			box-sizing: border-box;
		}

		.text {
			font-size: 36rpx;
			font-weight: bolder;
			margin: 0 6rpx;
			color: #606060;
		}
	}
</style>
